{% extends "front/Base.html" %}
{% block title %}
    <title>注册页面</title>
{% endblock %}

{% block head %}
    <script src="../../static/userjs.js"></script>
{% endblock %}

{% block body %}
    <div class="container-fluid col-4 center">
        <h2 class="center">注册页面</h2>
        <form class="" method="post">
              <div class="form-group ">
                <label for="email">邮箱地址</label>
                  <div class="row">
                       <input type="email" class="form-control col-8" name="email" id="email" aria-describedby="emailHelp">
                        <button type="button" id="btn-captcha" class="btn btn-warning col-2">验证码</button>
                  </div>
              </div>

                <div class="form-group">
                <div class="row">
                    <label for="mail_captcha">验证码</label>
                    <input type="text" name="captcha" class="form-control" id="mail_captcha">
                </div>
            </div>

            <div class="form-group">
                <div class="row">
                    <label for="exampleInputPassword1">用户名</label>
                    <input type="text" name="username" class="form-control" id="exampleInputPassword1">
                </div>
            </div>

              <div class="form-group">
                  <div class="row">
                      <label for="exampleInputPassword1">密码</label>
                      <input type="password" name="password" class="form-control" id="exampleInputPassword1">
                  </div>
              </div>

             <div class="form-group">
                  <div class="row">
                      <label for="exampleInputPassword1">确认密码</label>
                      <input type="password" name="confirm_password" class="form-control" id="exampleInputPassword1">
                  </div>
              </div>

          <button type="submit" class="btn btn-primary offset-4">注册</button>
        </form>
        <ul>
            {% for message in get_flashed_messages() %}
                <li>{{ message }}</li>
            {% endfor %}
        </ul>

    </div>
{% endblock %}